<template>
    <div id="cafe-map-container">
        <div id="cafe-map">

        </div>
        <cafe-map-filter></cafe-map-filter>
    </div>
</template>

<script>
    import { ROAST_CONFIG } from "../../config";
    import CafeMapFilter from "./CafeMapFilter";
    import { EventBus } from "../../event-bus";
    import {CafeTextFilter} from "../../mixins/filters/CafeTextFilter";
    import {CafeRoasterFilter} from "../../mixins/filters/CafeRoasterFilter";
    import {CafeBrewMethodsFilter} from "../../mixins/filters/CafeBrewMethodsFilter";

    export default {
        name: "CafeMap",
        components:{
            CafeMapFilter,
        },
        props:{
            latitude:{//经度
                type:Number,
                default:function () {
                    return 120.21
                }
            },
            longitude:{//纬度
                type:Number,
                default:function () {
                    return 30.39
                }
            },
            zoom:{
                type:Number,
                default:function () {
                    return 4
                }
            }
        },
        data(){
            return {
                markers:[],
                infoWindows:[],
            };
        },
        mixins:[
            CafeTextFilter,
            CafeRoasterFilter,
            CafeBrewMethodsFilter,
        ],
        mounted() {
            this.map = new AMap.Map('cafe-map',{
                center:[this.latitude,this.longitude],
                zoom: this.zoom
            });
            // 清除并重构点标记
            this.clearMarkers();
            this.buildMarkers();
            // 监听 filters-updated 事件过滤点标记
            EventBus.$on('filters-updated',function (filters) {
                this.processFilters(filters);
            }.bind(this))
        },
        computed:{
            cafes(){
                return this.$store.getters.getCafes;
            }
        },
        methods:{
            //创建标点
            buildMarkers(){
                this.markers = [];
                this.infoWindows = [];
                //自定义标点ico
                var image = ROAST_CONFIG.APP_URL+'/storage/images/cafe-marker.png';
                var icon = new AMap.Icon({
                    image:image,
                    imageSizes:new AMap.Size(19,33),
                });
                var infoWindow = new AMap.InfoWindow();
                for(var i=0;i<this.cafes.length;i++){
                    var marker = new AMap.Marker({
                        position:new AMap.LngLat(parseFloat(this.cafes[i].latitude),parseFloat(this.cafes[i].longitude)),
                        title:this.cafes[i].name+"("+this.cafes[i].location_name+")",
                        icon:icon,
                        extData:{
                            cafe:this.cafes[i]
                        }
                    });
                    // var infoWindow = new AMap.InfoWindow({
                    //     content:this.cafes[i].name,
                    // });
                    // this.infoWindows.push(infoWindow);
                    // 自定义信息窗体
                    var contentString = '<div class="cafe-info-window">' +
                        '<div class="cafe-name">' + this.cafes[i].name + this.cafes[i].location_name + '</div>' +
                        '<div class="cafe-address">' +
                        '<span class="street">' + this.cafes[i].address + '</span>' +
                        '<span class="city">' + this.cafes[i].city + '</span> ' +
                        '<span class="state">' + this.cafes[i].state + '</span>' +
                        '<span class="zip">' + this.cafes[i].zip + '</span>' +
                        '<a href="/#/cafes/' + this.cafes[i].id + '">进入</a>' +
                        '</div>' +
                        '</div>';
                    marker.content = contentString;

                    marker.on('click',function (mapEvent) {
                        infoWindow.setContent(mapEvent.target.content);
                        infoWindow.open(this.getMap(),this.getPosition())
                    });

                    this.markers.push(marker);
                }
                this.map.add(this.markers);
            },
            //清空标点
            clearMarkers(){
                for(var i=0;i<this.markers.length;i++){
                    this.markers[i].setMap(null);
                }
            },
            //更新筛选条件
            processFilters(filters){
                for(var i=0;i<this.markers.length;i++){
                    var textPassed = false;
                    var roasterPassed = false;
                    var brewMethodsPassed = false;
                    if(filters.text=='' || this.processCafeTextFilter(this.markers[i].getExtData().cafe,filters.text)){
                        textPassed = true;
                    }
                    if(!filters.roaster||this.processCafeRoasterFilter(this.markers[i].getExtData().cafe)){
                        roasterPassed = true;
                    }
                    if(filters.brew_methods.length==0||this.processCafeBrewMethodsFilter(this.markers[i].getExtData().cafe,filters.brew_methods)){
                        brewMethodsPassed = true;
                    }
                    if(textPassed&&roasterPassed&&brewMethodsPassed){
                        this.markers[i].setMap(this.map);
                    }else {
                        this.markers[i].setMap(null);
                    }
                }

            }
        },
        watch:{
            // 一旦 cafes 有更新立即重构地图点标记
            cafes(){
                this.clearMarkers();
                this.buildMarkers();
            }
        }
    }
</script>

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    div#cafe-map-container {
        position: absolute;
        top: 50px;
        left: 0px;
        right: 0px;
        bottom: 50px;

        div#cafe-map {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }

        div.cafe-info-window {
            div.cafe-name {
                display: block;
                text-align: center;
                color: $dark-color;
                font-family: 'Josefin Sans', sans-serif;
            }
            div.cafe-address {
                display: block;
                text-align: center;
                margin-top: 5px;
                color: $grey;
                font-family: 'Lato', sans-serif;
                span.street {
                    font-size: 14px;
                    display: block;
                }
                span.city {
                    font-size: 12px;
                }
                span.state {
                    font-size: 12px;
                }
                span.zip {
                    font-size: 12px;
                    display: block;
                }
                a {
                    color: $secondary-color;
                    font-weight: bold;
                }
            }
        }
    }
</style>
